<template>
    <div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item" :title="item" style="display: inline-block;width: 150px">
                <span>
                    <van-image
                            width="100"
                            height="100"
                            :src=item.bookimg
                    />
                </span>

            </van-cell>
        </van-list>
    </div>

</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                list: [
                    {
                        "bookname": "计算机组成原理",
                        "bookimg": "http://47.109.38.52:80/group1/M00/00/00/rBIu8WL0XcWAHQQQAAEXA2jppXk002.jpg",

                    },
                    {
                        "bookname": "计算机组成原理",
                        "bookimg": "http://47.109.38.52:80/group1/M00/00/00/rBIu8WL0XcWAHQQQAAEXA2jppXk002.jpg",
                    },
                    {
                        "bookname": "计算机组成原理",
                        "bookimg": "http://47.109.38.52:80/group1/M00/00/00/rBIu8WL0XcWAHQQQAAEXA2jppXk002.jpg",
                    },
                    {
                        "bookname": "计算机组成原理",
                        "bookimg": "http://47.109.38.52:80/group1/M00/00/00/rBIu8WL0XcWAHQQQAAEXA2jppXk002.jpg",
                    },
                    {
                        "bookname": "计算机组成原理",
                        "bookimg": "http://47.109.38.52:80/group1/M00/00/00/rBIu8WL0XcWAHQQQAAEXA2jppXk002.jpg",
                    },

                ],
                loading: false,
                finished: false,
            };
        },
        methods: {
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 2000);
            },
        },
    }
</script>

<style >

</style>